import React, { Component } from 'react';
import { Modal, Button, Col, Row, Form, Select, Spin, Table, Input, message } from 'antd';
import { connect } from 'dva';

const { Option } = Select;
const { Search } = Input;
const FormItem = Form.Item;

class ReferenceQuestion extends Component {
  state = {
    loading: false,
    linkData: [],
    table: {
      total: 0,
      page: 1,
      size: 10,
      query: '',
    },
    relateQAs: [],
    seachType: 'q',
    relateList: [],
  };

  componentDidMount() {
    this.fetchLinkData();
  }

  classSelectChange = e => {
    this.setState(
      {
        seachType: e,
      },
      () => {
        this.fetchLinkData();
      }
    );
  };

  searchClass = e => {
    let { table } = this.state;
    table.query = e;
    table.page = 1;
    this.setState(
      {
        table,
      },
      () => {
        this.fetchLinkData();
      }
    );
  };

  fetchLinkData = () => {
    let { loading, linkData, table, seachType } = this.state;

    this.setState(
      {
        loading: true,
      },
      () => {
        const { dispatch, currentUser, question } = this.props;
        this.reqRef = requestAnimationFrame(() => {
          dispatch({
            type: 'editQa/linkBoxJson',
            payload: {
              robotId: currentUser.robotId,
              question,
              field: seachType,
              query: table.query,
              page: table.page,
              limit: table.size,
            },
            callback: res => {
              table.total = res.total;
              linkData = res.qaList;
              this.setState({
                table,
                linkData,
                loading: false,
              });
            },
          });
        });
      }
    );
  };

  addLinkThis = item => {
    let arr = [];
    let relateArr = [];
    arr = arr.concat(this.state.relateQAs);

    if (arr.length >= 10) {
      return message.error('关联问最多添加10条');
    }
    arr.unshift(item.sid);
    relateArr = relateArr.concat(this.state.relateList);
    relateArr.unshift(item);
    this.setState({
      relateQAs: arr,
      relateList: relateArr,
    });
  };

  fanye = e => {
    let { table } = this.state;
    table.page = e;

    this.setState(
      {
        table,
      },
      () => {
        return this.fetchLinkData();
      }
    );
  };

  handleOk = () => {
    this.props.handleOk(this.state.relateList);
  };

  render() {
    const { visible, handleCancel } = this.props;
    const { loading, linkData, table, seachType, relateQAs } = this.state;
    this.columns = [
      {
        title: '问题',
        key: 'question',
        dataIndex: 'question',
      },
      {
        title: '分类',
        key: 'category',
        dataIndex: 'category',
      },
      {
        title: '操作',
        render: (text, item) => {
          return (
            <div>
              {relateQAs.indexOf(item.sid) === -1 ? (
                <Button
                  htmlType="button"
                  type="primary"
                  size="small"
                  onClick={text => {
                    this.addLinkThis(item);
                  }}
                  icon="link"
                >
                  关联{' '}
                </Button>
              ) : (
                <Button htmlType="button" size="small" icon="link">
                  已关联{' '}
                </Button>
              )}
            </div>
          );
        },
      },
    ];
    return (
      <Modal
        title="关联问题"
        visible={visible}
        onOk={this.handleOk}
        onCancel={handleCancel}
        width={750}
        key="2"
        centered
        zIndex={3010}
      >
        <Form layout="inline" style={{ paddingBottom: 20 }}>
          <FormItem>
            <Select
              style={{ width: 160 }}
              defaultValue={seachType}
              onChange={this.classSelectChange}
            >
              <Option value="q">搜索问题</Option>
              <Option value="a">搜索答案</Option>
            </Select>
          </FormItem>
          <FormItem>
            <Search
              placeholder="请输入内容"
              onSearch={value => this.searchClass(value)}
              style={{ width: 320 }}
              allowClear
            />
          </FormItem>
        </Form>
        <Spin spinning={loading}>
          <Table
            style={{ height: 500, overflow: 'auto' }}
            size="small"
            columns={this.columns}
            dataSource={linkData} // 数据
            rowKey="sid"
            pagination={{
              // 分页
              total: parseInt(table.total), // 数据总数量
              showSizeChanger: true, // 是否显示可以设置几条一页的选项
              onChange: e => this.fanye(e, 'class'),
              onShowSizeChange: this.onShowSizeChange,
              showQuickJumper: true,
            }}
          />
        </Spin>
      </Modal>
    );
  }
}

export default connect(({ user }) => ({
  currentUser: user.currentUser,
}))(ReferenceQuestion);
